<template>
	<view >
	
		<!-- 头部 -->
		<u-toast ref="uToast" />
		<login-heard></login-heard>
		<!-- 登录框 -->
		<view class="login-body">	
					<!-- 密码登录 -->
			<template v-if="!phonelogin">
				<u-form ref="uForm" :error-type="errorType">
					<u-form-item  >
						<u-input  v-model="username"  placeholder="请输入账号/手机号/邮箱"  />
					</u-form-item>
					<u-form-item >
						<u-input  v-model="password"   placeholder="请输入密码"  /><text @tap="forgetpassword">忘记密码？</text>			
					</u-form-item>
					<button class="button" @tap="login" :loading="loading">登录</button>
				</u-form>
				<!-- 验证码登录 -->
				<view class="login-codelogin u-f-ajc"  @tap="changelogin">
					验证码登录 <text>   ></text>
				</view>
			</template>
		
			<!-- 验证码登录 -->			
			<template v-else>
				<u-form  ref="uForm">
							<u-form-item  label="+86" prop="phone">
								<u-input placeholder="请输入手机号"  v-model="phone"   />
							</u-form-item>
							<u-form-item  prop="code">
								<u-input placeholder="请输入验证码" v-model="code" />
								<view class="getcode">
									<!-- 获取验证码按钮 -->
								<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
									@change="codeChange"></u-verification-code>
									<text @tap="getCode">{{tips}}</text>
								</view>
							</u-form-item>
							<button class="button"  @tap="login" type="default" v-if="isrember">找回密码</button>
							<button class="button"  @tap="login" type="default" v-else>登录</button>
						</u-form>
				<!-- 验证码登录 -->
				<view class="login-codelogin u-f-ajc"   @tap="changelogin">
					账号密码登录 <text>   ></text>
				</view>
			</template>
		</view>
		<!-- 下面 -->
		<login-bottom></login-bottom>
	</view>
</template>

<script>
	import loginHeard from '../../components/login/login-heard.vue'
	import loginBottom from '../../components/login/login-bottom.vue'
	export default {
		components:{
			loginHeard,
			loginBottom
		},
		data() {
			return {
				isrember:false,
				phone:'',
				code:'', //验证码
				tips: '', //提示时间
				// refCode: null,
				seconds: 60, //验证码时间
				phonelogin:false, //是不是验证码登录
				loading:false,
				errorType: ['toast'],//提示错误类型
				background:'#FFE933',
				username:'',
				password:'',
				height:100
				
			}
		},
		methods: {
			changelogin(){
				this.isrember=false
				this.phonelogin=!this.phonelogin
			},
			codeChange(text) {
					this.tips = text;
				},
			getCode() {
				//判断手机号是否正确
				
			 if(!this.$u.test.mobile(this.phone)){
					this.$refs.uToast.show({
							title: '手机号不正确',
							type: 'error'
						})
					return
				}
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
				},
				end() {
					this.$u.toast('倒计时结束');
				},
				start() {
					this.$u.toast('倒计时开始');
				},
			//忘记密码
			forgetpassword(){
				this.isrember=true
				this.phonelogin=true
			},
			phonecodelogin(){
				uni.navigateTo({
					url:'phonecode-login'
				})
			},
			//登录
			login(){
				
				if(this.username==''){
					this.loading=true
					this.$refs.uToast.show({
							title: '账号不能为空',
							type: 'error'
						})
						this.loading=false
						return
				}else if(this.password==''){
					this.loading=true
				this.$refs.uToast.show({
						title: '密码不能为空',
						type: 'error'
					})
					this.loading=false
					return
				}
				
		
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	
	.login-codelogin>text{
		color: #D8D8D8;
		margin-left: 10upx;
	}


.getcode{
	padding: 10upx 10upx;
	background: #F4F4F4;
	color: #939393;
	font-size: 25upx;
	border-radius: 10upx;
}
	
	.login-body{
		padding: 0 40upx;
		margin-top: 30upx;
	}
	.button{
		margin: 30upx 40upx;
		background: #FFE933;
	}
.login-img{
	
	width: 100%;
}
.login-f{
	background-color: #FFE933;
	height:200upx;
	width: 100%;
}
.login-f-close{
	position: absolute;
	left: 30upx;
	top: 80upx;
	
}

</style>
